.login_container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url('./image/bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
  
    .logo_box {
      display: flex;
      align-items: center;
      position: absolute;
      top: calc(70px * var(--multiple));
      left: calc(80px * var(--multiple));
  
      .logo {
        height: calc(31px * var(--multiple));
      }
  
      .line {
        width: calc(2px * var(--multiple));
        height: calc(24px * var(--multiple));
        background: #fff;
        border-radius: 1px;
        margin: 0 calc(10px * var(--multiple));
      }
    }
  
    .system_title {
      font-size: calc(52px * var(--multiple));
      font-family: Hiragino Kaku Gothic ProN;
      font-weight: normal;
      color: #ffffff;
      text-align: center;
      margin-bottom: calc(8px * var(--multiple));
    }
  
    .login_form_container {
      width: calc(750px * var(--multiple));
      background: rgba(0, 0, 0, 0.1);
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    .login_form_top {
      position: relative;
      padding-left: calc(22px * var(--multiple));
  
      &:before {
        content: "";
        display: block;
        position: absolute;
        width: calc(7px * var(--multiple));
        height: calc(82px * var(--multiple));
        background: #193665;
        top: 0;
        left: 0;
      }
  
      .welcome {
        color: #193665;
        font-size: calc(44px * var(--multiple));
        font-weight: 600;
        line-height: 1;
      }
  
      h1 {
        color: #193665;
        font-size: calc(24px * var(--multiple));
        font-weight: 600;
        padding: 0;
        margin: 8px 0 0;
      }
    }
  
    .login_text {
      margin-top: calc(66px * var(--multiple));
      color: #193665;
      font-size: calc(20px * var(--multiple));
      border-bottom: calc(5px * var(--multiple)) solid #8FA0BD;
      border-radius: 1px;
      display: inline-block;
    }
  
    .writeText {
      background: url("./image/logo_text.png");
      width: calc(44% * var(--multiple));
      height: calc(19% * var(--multiple));
      background-size: cover;
      position: absolute;
      left: calc(8% * var(--multiple));
      top: calc(30% * var(--multiple));
    }
  
    .login_form {
      padding: calc(62px * var(--multiple)) calc(50px * var(--multiple)) calc(44px * var(--multiple));
      width: calc(528px * var(--multiple));
      background-color: #fff;
      border-radius: calc(24px * var(--multiple));
    }
  
    .form {
      margin-top: calc(41px * var(--multiple));
    }
  
    :global {
      .ant-input-affix-wrapper-lg {
        padding: 0 calc(10px * var(--multiple)) 0 0;
      }
  
      .ant-input-affix-wrapper {
        border: 1px solid #8EA1BD;
      }
  
      .ant-btn-block {
        height: calc(50px * var(--multiple));
        font-size: calc(26px * var(--multiple));
      }
  
      .ant-btn-lg {
        padding: 0;
      }
    }
    .icp {
      position: absolute;
      bottom: calc(14px * var(--multiple));
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      white-space: nowrap;
      font-size: calc(16px * var(--multiple));
    }
  }
  
  .iconBox {
    width: calc(48px * var(--multiple));
    height: calc(48px * var(--multiple));
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F5FAFD;
    border-right: 1px solid #8EA1BD;
  }